<div class="pure-g-r">
    <div class="pure-u-1-3">
        <h4>无序列表</h4>

        <ul>
            <li>列表项 1</li>
            <li>列表项 1
                <ul>
                    <li>列表项 2</li>
                    <li>列表项 2
                        <ul>
                            <li>列表项 3</li>
                            <li>列表项 3</li>
                        </ul>
                    </li>
                    <li>列表项 2</li>
                    <li>列表项 2</li>
                </ul>
            </li>
            <li>列表项 1</li>
            <li>列表项 1</li>
        </ul>
    </div>

    <div class="pure-u-1-3">
        <h3>有序列表</h3>

        <ol>
            <li>列表项 1</li>
            <li>列表项 1
                <ol>
                    <li>列表项 2</li>
                    <li>列表项 2
                        <ol>
                            <li>列表项 3</li>
                            <li>列表项 3</li>
                        </ol>
                    </li>
                    <li>列表项 2</li>
                    <li>列表项 2</li>
                </ol>
            </li>
            <li>列表项 1</li>
            <li>列表项 1</li>
        </ol>
    </div>

    <div class="pure-u-1-3">
        <h3>定义列表</h3>

        <dl>
            <dt>定义列表中的项目</dt>
            <dd>描述列表中的项目</dd>

            <dt>定义列表中的项目</dt>
            <dd>描述列表中的项目</dd>
            <dd>描述列表中的项目</dd>

            <dt>定义列表中的项目</dt>
            <dt>定义列表中的项目</dt>
            <dd>描述列表中的项目</dd>
        </dl>
    </div>
</div>
